<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版 -->

    <div id="app">
      <!-- <p>{{msg}}</p> -->
      <p>{{a}}</p>
      <p>{{b}}</p>
    </div>

    <script>
      var data = {
        a: 1,
        b: null,
        newTodoText: "",
        visitCount: 0,
        hideCompletedTodos: false,
        todos: [],
        error: null,
      };
      // √ 如果不写默认值 状态变化 试图不更新

      var vm = new Vue({
        el: "#app",
        // data: {
        //   msg: "hello",
        // },
        // 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中
        data: data,
      });

      console.log(vm.$data === data);
      console.log(vm.$el);
      //   $开头的叫做vue内置的实例属性 与我们自己写的属性区分
      console.log(vm.a, vm.b);

      //   $watch 是一个实例方法  监听某个状态的变化

      //   vm.$watch("a", function (newValue, oldValue) {
      //     console.log(newValue, oldValue);
      //   });
      vm.$watch("a", function (n, o) {
        console.log(n, o);
      });
    </script>
  </body>
</html>
